<template>
  <div style="margin-top:30px">
    <!-- <vxe-toolbar id="outboundId" :setting="{storage: true}" export :refresh="{query: getInventory}">
      <template v-slot:buttons>
        <el-button @click="getInventory">查询</el-button>
      </template>
    </vxe-toolbar> -->
    <div style="margin-top:-20px;display:flex">
        <p>仓库编码</p>
        <p style="margin-left:200px">仓库名称</p>
    </div>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      highlight-hover-row
      row-id="id"
      height="500"
      :loading="loading"
      :data="tableData"
      :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
    >
      <template v-slot:empty>
        <p> </p>
      </template>
 -->
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>
      <vxe-table-column field="shipmentName" title="客户编码" min-width="180" />
      <vxe-table-column field="warehouseName" title="入驻商名称" min-width="180" />
      <vxe-table-column field="warehouseLocationName" title="类型" min-width="180" />
      <vxe-table-column field="lotNumber" title="联系人" min-width="180" />
      <vxe-table-column field="cargoTypeTitle" title="联系电话" min-width="180" />
      <vxe-table-column title="操作"  min-width="100" fixed="right">
        <template slot-scope="scope" >
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <vxe-button type="text" @click="funcDelete(scope.row.code)">
              <i class="el-icon-delete" />
            </vxe-button>
          </el-tooltip>
        </template>
      </vxe-table-column>

    </vxe-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="funcCancel">取 消</el-button>
      <el-button type="primary" @click="funcSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import request from '@/utils/request'
import 'vxe-table/lib/index.css'

Vue.use(VXETable)
export default {
  name: 'JobItemAdd',

  data() {
    return {
      optionType: '',
      loading: false,

      emptyForm: {},
      groupCode:'',
      shipmentCode:'',
      chargeAgreementCodeData: [], // 计算类型数组
      tableData: [],
      listQuery:{
        goodsName:''
      }
    }
  },
  created() {


  },
  methods: {

    // 翻译破损类型
    formatterSource({ cellValue }) {
      if (cellValue == 0){
        return "转入"
      }
      return "转权"
    },
    //出库调用库存
    getInventory(){
      this.loading = true
      request({
        url: '/ntocc-wms-api/inventory',
        method: 'get',
        params: { groupCode: this.groupCode, shipmentCode: this.shipmentCode,goodsName:this.listQuery.goodsName,isFrozen:0}
      }).then(response => {
        this.tableData = response.data.records
        this.loading = false

        this.tableData.forEach( i =>{
          i.inventoryQuantity = i.quantity
          i.inventoryAuxiliaryQuantity = i.auxiliaryQuantity
          i.chargeAgreementCode = ''
          if (i.cargoType == 0) {
            i.cargoTypeTitle = '现货'
          }
          if (i.cargoType == 1) {
            i.cargoTypeTitle = '期货'
          }
          i.quantity = ''
          delete i.auxiliaryQuantity

        })
      })
    },
    // 提交
    funcSubmit() {
      let selectRecords = this.$refs.xTable.getCheckboxRecords()
      this.$emit('fatherAddMethod', selectRecords)

    },
    // 取消
    funcCancel() {
      if (this.optionType == 'edit') {
        this.$emit('fatherCancelMethod', 'edit')
      } if (this.optionType == 'add') {
        this.$emit('fatherCancelMethod', 'add')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 175px;
    float: right;
  }
</style>
